<template>
  <el-dialog
    @close="close"
    title="成员列表——成员详情"
    :visible.sync="dialog"
    width="70%">
    <div class="cy_list">
      <!-- <div class="cy_xq">
        <h3>成员列表——成员详情</h3>
      </div> -->
      <div class="cy_tab">
        <span class="cy_tx" v-for="(item,index) in formInline.imageUrl" :key="item.path">
          <span v-if="index == 0">
            <img :src="item" style="width: 100%;height: 100%;border-radius: 50%;">
          </span>

        </span>
        <span class="cy_taspa">
          <table class="cy_table">
            <tr>
              <td><h3 class="ninammee">{{formInline.nickname}}</h3></td>
              <td style="color:grey;" class="tdwid5">ID:{{formInline.playerNo}}</td>
              <td>总收入</td>
              <td>{{formInline.earnings}}元</td>
            </tr>
            <tr>
              <td style="color:grey;"> {{formInline.age}} &nbsp; &nbsp;{{formInline.city}}</td>
              <td class="tdwid5"></td>
              <td>陪玩订单收入</td>
              <td>{{formInline.earnings}}元</td>
            </tr>
            <tr>
              <td style="color:grey;">加入时间：</td>
              <td style="color:grey;" class="tdwid5">{{formInline.createTime}}</td>
              <td>礼物收入</td>
              <td>元</td>
            </tr>
            <tr>
              <td style="color:grey;">最后上线时间：</td>
              <td style="color:grey;" class="tdwid5">{{formInline.updateTime}}</td>
              <!--<td>活跃值</td>
              <td></td>-->
            </tr>
          </table>
        </span>
      </div>
    </div>
    <div class="cy_game">
      <el-carousel type="card" arrow="always" :loop="false" :initial-index="1"
                   indicator-position="none" :autoplay="false">
        <el-carousel-item v-for="(items, index) in formInline.gameList" :key="index">
      <span class="ga_list7">
        <div class="img_tu"><img :src="items.selectIcon" style="height: 50px;width: 50px"></div>
        <h3>{{items.name}}</h3>
        <p>
          <span class="red_36">{{items.price}}</span>元/局
        </p>
        <div class="fonts12">
          <span class="duanwei">{{items.rankName}}</span>
          <span>接单数：{{items.orderNum}}</span>
          <div>总收入：{{items.earnings}}&nbsp;元</div>
        </div>
        <div class="fonts12">最近接单时间：{{items.id}}</div>
        <span class="icon_tubiao">
           <!--<el-checkbox-group v-model="gameId" @change="()=>{checkChange(items.gameId)}">-->
                <el-checkbox v-model="items.checkBoxChecked" @change="()=>{checkChange(items.gameId,items.checkBoxChecked)}"></el-checkbox>
           <!--</el-checkbox-group>-->
        </span>
      </span>
        </el-carousel-item>
      </el-carousel>
      <!--<el-carousel type="card" arrow="always" :loop="false" :initial-index="1"
                   indicator-position="none" :autoplay="false">
        <el-carousel-item v-for="(items, index) in formInline.gameList" :key="index">
          <div class="div2">
            <div>
              <div style="position: absolute;" v-show="index===0 || index===1">

              </div>
              <img :src="items.selectIcon" class="headImgStyle">
            </div>
            <div class="nickname">
              {{items.name}}
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>-->


    </div>
    <div class="cy_dd">
      <div class="pldc01"><el-button type="primary" @click="exportExcel()" size="mini">批量导出</el-button></div>
<!--      <div class="dingd"><div class="dddd01"><h2>订单</h2></div></div>-->
      <div class="hezi">
        <div class="dd_select">
          <div>
            <el-form size="mini" :model="formInline" :inline="true">
              <el-form-item label="状态" class="font12size">
                <el-radio  size="mini" class="radiosmall" v-model="statusArray" style="margin-left:0px;" label="" border>全部</el-radio><!--style="margin-left:0px;background:rgb(194,128,255);color:white;"-->
                <el-radio size="mini" class="radiosmall" v-model="statusArray" label="28,29,31,33,34,35,38" border>已完成</el-radio>
                <el-radio size="mini" class="radiosmall" v-model="statusArray" label="21,22" border>已取消</el-radio>
                <el-radio size="mini" class="radiosmall" v-model="statusArray" label="24,25,27,32,36,37" border>已退款</el-radio>
                <el-radio size="mini" class="radiosmall" v-model="statusArray" label="20" border>待付款</el-radio>
                <el-radio size="mini" class="radiosmall" v-model="statusArray" label="23" border>待接单</el-radio>
                <el-radio size="mini" class="radiosmall" v-model="statusArray" label="26" border>服务中</el-radio>
                <el-radio size="mini" class="radiosmall"  v-model="statusArray" label="30" border>售后中</el-radio>
              </el-form-item>
              <el-form-item label="时间">
                <el-date-picker
                  v-model="value2"
                  value-format='yyyy-MM-dd'
                  type="daterange"
                  :picker-options="pickerOptions"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  @change="timeChange"
                  align="right">
                </el-date-picker>
              </el-form-item>
              <br>
              <el-form-item label="下单">
               <!-- <el-select v-model="value" placeholder="请选择" class="xxddsele"  style="width: 80px">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>-->
                <el-input class="xxddinput" v-model="formInlineOrder.orderParames" placeholder="下单者昵称/ID"></el-input>
              </el-form-item>
              <!--<el-form-item label="陪玩">
                <el-select v-model="value" placeholder="请选择" class="ppwwsele">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
                <el-input class="ppwwinpu" v-model="formInlineOrder.playerParames"></el-input>
              </el-form-item>-->
              <br>
              <el-form-item label="金额">
                <el-input-number v-model="formInlineOrder.moneyStart" @change="handleChange" :min="0" ></el-input-number>———
                <el-input-number v-model="formInlineOrder.moneyEnd" @change="handleChange" :min="0"></el-input-number>
                <el-button class="cx001" size="mini" @click="query()" type="primary" icon="el-icon-search">查询</el-button>
              </el-form-item>
              <!--<el-button size="mini" @click="exportExcel()" type="primary">导出</el-button>-->
              <br>
            </el-form>
          </div></div>
        <div class="cy_table133">

          <el-table style="width: 100%;margin-left:0px;" class="per_tb" stripe v-loading="loading" border :data="tableData">
            <el-table-column prop="orderNo" label="订单号" width="80px">

            </el-table-column>
            <el-table-column prop="productName" label="陪玩师">
              <template slot-scope="scope">
                {{scope.row.productName}} &nbsp; ID:{{scope.row.goodsNo}}
              </template>
            </el-table-column>
            <el-table-column label="下单人">
              <template slot-scope="scope">
                {{scope.row.nickname}} &nbsp; ID:{{scope.row.memberNo}}
              </template>
            </el-table-column>
            <el-table-column prop="productSpecifica" label="陪玩项目">

            </el-table-column>
            <el-table-column prop="orderPrice" label=" 单价(N币)">

            </el-table-column>
            <el-table-column prop="orderNumber" label=" 数量">

            </el-table-column>
            <el-table-column prop="orderPrice" label="应付金额">

            </el-table-column>
            <el-table-column prop="payAmount" label=" 实付金额">

            </el-table-column>
            <el-table-column prop="status" label=" 订单状态">
              <template slot-scope="scope">
                <el-tag type="success" size="mini" v-if="scope.row.status === 28 || scope.row.status ===29|| scope.row.status ===31 || scope.row.status ===33 || scope.row.status ===34 || scope.row.status ===35 || scope.row.status ===38">已完成</el-tag>
                <el-tag type="danger" size="mini" v-else-if="scope.row.status === 21 || scope.row.status ===22">已取消</el-tag>
                <el-tag type="success" size="mini" v-else-if="scope.row.status === 24 || scope.row.status ===25 || scope.row.status ===27 || scope.row.status ===32 || scope.row.status ===36 || scope.row.status ===37">已退款</el-tag>
                <el-tag type="success" size="mini" v-else-if="scope.row.status === 20">待付款</el-tag>
                <el-tag type="success" size="mini" v-else-if="scope.row.status === 23">待接单</el-tag>
                <el-tag type="success" size="mini" v-else-if="scope.row.status === 26">服务中</el-tag>
                <el-tag type="success" size="mini" v-else-if="scope.row.status === 30">售后中</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="orderTime" label="操作时间">
            </el-table-column>
          </el-table>
          <el-pagination
            class="pagination-right"
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="formInline.pageNum"
            :page-sizes="[10]"
            :page-size="formInline.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="formInline.total">
          </el-pagination>
        </div>
      </div>
      <!--<div class="pages_cy">
        <el-pagination background layout="prev, pager, next" :total="1000"></el-pagination>
      </div>-->
      <!-- <div class="pldc"><el-button type="primary" @click="exportExcel()">批量导出</el-button></div> -->

    </div>
    <div class="cy_pie">
      <span class="pie_tutu" id="echartContainer2"></span>
      <span class="cy_pie_table">
        <el-table :data="cakeTableData" style="width: 360px" class="perpie_flo perpie_flo2">
          <el-table-column prop="name" label="用户" width="80"></el-table-column>
          <el-table-column prop="value" label="总消费" width="80"></el-table-column>
          <el-table-column prop="scale" label="总占比" width="80"></el-table-column>
        <!--  <el-table-column prop="name" label="订单消费" width="80"></el-table-column>
          <el-table-column prop="address" label="订单占比" width="80"></el-table-column>-->
        </el-table>
      </span>
    </div>

  </el-dialog>
</template>
<script>
  var echarts = require('echarts')
  import { getUnionPeopleDetailAPI ,getUnionIncomeListAPI,exportAPI,getUnionCakeListAPI} from '@/api/user'
  import { getOrderListAPI } from '@/api/order'
  import AddServer from './AddServer'
  import AddMode from './AddMode'
  import AddLabel from './AddLabel'
  export default {
    name: 'GameEdit',
    components: { AddLabel, AddMode, AddServer },
    props: {
      dialog_: {
        default: false,
        type: Boolean
      },
      name: {
        type: String,
        default: null
      },
      playerNo: {
        type: String,
        default: null
      }
    },
    data() {
      return {
        checkBoolean:false,
        options:[
          {
            value: 'ID号',
            label: 'ID号'
          }, {
            value: '昵称',
            label: '昵称'
          }
        ],
        statusArray:'',
        value2: '',
        value:'',
        dialog: '',
        gameId:[],
        myChartIncome:'',// 收入
        tableData:[],
        pickerOptions: {
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
              picker.$emit('pick', [start, end]);
            }
          },{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一年',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 365);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        cakeTableData:[],
        hiddenAreaServer:false,
        btnLoading: false,  // 提交按钮状态
        formInline:{
        },
        formInlineOrder: {
          search: "",
          statusArray: [],//状态数组
          timeType: 0,//时间范围类型 0自定义范围，近一年：1，近一月：2，近一周：3,今日：4
          end: "", //自选日期结束日期
          start: "",//自选日期开始日期
          playerNo:"",  //陪玩号
          gameId:"",    //服务类型id
          orderParames:"", //下单查询参数
          playerParames:"",// 陪玩查询参数
          moneyStart:0,//金额左范围
          moneyEnd:0,//金额右范围
          pageNum: 1,
          pageSize: 10
        },
        incomeFormInline:{
            end: "2020-01-14T05:51:11.716Z", //自选日期结束日期
            limit: 500,//查询多少条数据
            start: "2020-01-14T05:51:11.716Z",//自选日期开始日期
            timeType: 1 //时间范围类型 0自定义范围，近一年：1，近一月：2，近一周：3,今日：4
        },
      }
    },
    mounted() {
      this.$nextTick(function() {
        this.myChartIncome = echarts.init(document.getElementById('echartContainer2'));
        this.getIncomeList();
      });

      this.dialog = this.dialog_
      if (this.name) {
        this.getDetails();

      }
    },
    created() {
    },
    methods: {
      // 多选框发生改变的事件
      checkChange(value,checked){
        let gameIdString = ''
        // this.formInlineOrder.gameId的格式是'a,b,c'类型，代表的是查询订单的服务类型参数
        let arr = this.formInlineOrder.gameId.split(",")
        // 用户勾选 或者 取消勾选
        if(checked){
          // 如果 当前有服务勾选
          if(this.formInlineOrder.gameId != ''){
            // 用逗号拼接
            this.formInlineOrder.gameId = this.formInlineOrder.gameId + ',' + value
          }else{
            // 反之，不需要加上逗号，直接赋值
            this.formInlineOrder.gameId =value
          }
          // 去掉尾部的逗号
          this.formInlineOrder.gameId = this.formInlineOrder.gameId.slice(0,this.formInlineOrder.gameId.length-1)
        // 如果用户 取消勾选
        }else{
          // 遍历gameList
          for(let i = 0;i<arr.length;i++){
            if(arr.length > 1){
              if(value != arr[i]){
                // 传过来的值跟当前遍历的值不相等的时候，把这个值重新拼接起来，准备组成新的字符串'a,b,c'
                gameIdString = gameIdString + arr[i] + ','
              }
            }else{
              // 如果已经是空的情况下，未勾选任何内容，直接赋值为空，并且return
              this.formInlineOrder.gameId = ''
            }
          }
          if(this.formInlineOrder.gameId != ''){
            this.formInlineOrder.gameId = gameIdString.slice(0,gameIdString.length-1)
          }
        }
        this.getOrderListAPI()
      },
      // 导出事件
      exportExcel() {
        exportAPI(this.formInlineOrder).then(res => {
          let blob = new Blob([res], {type: "application/vnd.ms-excel"});
          let objectUrl = URL.createObjectURL(blob);
          var downloadA = document.createElement('a');
          downloadA.href = objectUrl;
          downloadA.download = "file";
          downloadA.click();
          //window.URL.revokeObjectURL(downloadA.href);
          /*window.location.href = objectUrl;
          if (res.code === 0) {
           this.dataTool = res.data
          } else {
            this.$message.error(res.msg)
          }*/
        })
      },
      // 时间发生改变的事件
      timeChange(value){
        if(value == null){
          this.formInlineOrder.start = ''
          this.formInlineOrder.end = ''
        }else {
          this.formInlineOrder.start = this.value2[0]
          this.formInlineOrder.end = this.value2[1]
        }
      },
      // 关闭弹窗
      close() {
        this.$emit('close')
      },
      // 点击查询事件
      query() {
        // string类型转数组类型
        let statusArr = ''
        if (this.statusArray != null && this.statusArray != ''){
          statusArr = this.statusArray.split(',')
        }
        this.formInlineOrder.statusArray = statusArr
        // 数组类型转string
        /*if(this.gameId.length == this.serviceLength){
          this.formInlineOrder.gameId  = ''
        } else {
          let stringGameId = ''
          for(let index in this.gameId){
            stringGameId += this.gameId[index] + ','
          }
          this.formInlineOrder.gameId = stringGameId
          // 去掉尾部的逗号
          this.formInlineOrder.gameId = this.formInlineOrder.gameId.slice(0,this.formInlineOrder.gameId.length-1)
        }*/
        this.formInlineOrder.pageNum = 1
        this.getOrderListAPI()
      },
      // pageSize发生改变触发
      handleSizeChange(val) {
        this.pageNum = 1
        this.pageSize = val
        this.getOrderListAPI()
      },
      // pageNum 发生改变触发
      handleCurrentChange(val) {
        this.formInlineOrder.pageNum = val
        this.getOrderListAPI()
      },
      // 根据角色ID查询角色详情
      getDetails() {
        let param = {
          playerNo:this.name
        }
        getUnionPeopleDetailAPI(param).then(res => {
          if (res.rtnInfo.code === 0) {
            let stringGameId = ''
            for(let i = 0; i<res.rtnInfo.data.gameList.length;i++){
              stringGameId = stringGameId + res.rtnInfo.data.gameList[i].gameId + ','
              res.rtnInfo.data.gameList[i].checkBoxChecked = true
            }
            this.formInline = res.rtnInfo.data;
            this.formInlineOrder.gameId = stringGameId.slice(0,stringGameId.length-1)
            this.gameId = this.formInlineOrder.gameId.split(',')
            // 详情的接口请求成功，再请求订单接口；详情返回的参数，是订单的查询参数
            this.formInlineOrder.playerNo = res.rtnInfo.data.playerNo // 陪玩号带入到订单查询中
            this.getOrderListAPI();
          } else {
            this.$message.error(res.message)
          }
        })
      },
      // 获取订单列表
      getOrderListAPI() {
        this.loading = true
        getOrderListAPI(this.formInlineOrder).then(res => {
          this.loading = false
          if(this.formInlineOrder.moneyStart == 0){
            this.formInlineOrder.moneyStart = ''
          }
          if(this.formInlineOrder.moneyEnd == 0){
            this.formInlineOrder.moneyEnd = ''
          }
          if (res.rtnInfo.code === 0) {
            this.tableData = res.rtnInfo.data.list
            this.formInline.total = res.rtnInfo.data.total
          } else {
            this.$message.error(res.message)
          }
        })
      },
      getIncomeList(){
        //成员收入构成
        getUnionCakeListAPI({playerNo:this.playerNo}).then(res => {
          this.loading = false;
          if (res.rtnInfo.code === 0) {
            this.cakeTableData = res.rtnInfo.data;
            this.myChartIncome.setOption({
              title: {
              },
              tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
              },
              legend: {
                orient: 'vertical',
                left: 'left',
                data: []
              },
              series: [
                {
                  name: '访问来源',
                  type: 'pie',
                  radius: '55%',
                  center: ['50%', '60%'],
                  data: this.cakeTableData/*[
            {value: 335, name: '直接访问'},
            {value: 310, name: '邮件营销'},
            {value: 234, name: '联盟广告'},
            {value: 135, name: '视频广告'},
            {value: 1548, name: '搜索引擎'}
          ]*/,
                  emphasis: {
                    itemStyle: {
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                  }
                }
              ]
            });
          } else {
            this.$message.error("查询报错");
          }
        });
      }
    }
  }
</script>

<style>
  .cy_tab {
    position: relative;
    width: 100%;
    height: 226px;
    margin-left: 5%;
}
 span.cy_tx {
    width: 200px;
    height: 200px;
    /* background: gray; */
    display: inline-block;
    border-radius: 50%;
    /* margin-left: 10px; */
    /* margin-top: 51px; */
    position: absolute;
    /* top: -17px; */
    /* margin-left: 100px; */
}
  span.cy_taspa {
    display: inline-block;
    margin-left: 235px;
    margin-top: 14px;
    /* width: 507px; */
  }
  table.cy_table {
    width: 572px;
    height: 163px;
  }
  span.ga_list7 {
    display: inline-block;
    width: 220px;
    height: 254px;
    border: 2px solid rgb(194,128,255);
    text-align: center;
    margin-left: 130px;
    margin-top: 30px;
    border-radius: 20px;
  }
  .img_tu {
    width: 60px;
    height: 60px;
    margin: 0 auto;
    margin-top: 20px;
  }
  span.red_36 {
    color: red;
    font-size: 18px;
  }
  span.duanwei {
    font-size: 12px;
    color: purple;
  }
  .fonts12 {
    font-size: 12px;
  }
  .cy_dd {
    margin-top: 30px;
  }

  .hezi {
    border: 1px solid #b5b5b5;
    border-radius: 5px;
    padding: 25px;
    /* box-shadow:inset 2px 2px 2px lightgray; */
    /* box-shadow: 0 0 10px lightgray*/

  }

  .el-date-editor.input_szt.el-input.el-input--mini.el-input--prefix.el-input--suffix.el-date-editor--datetime {
    width: 55px;
    margin-left: 20px;
  }
  .ztrow.el-row {
    float: left;
  }
  .el-form-item.input_cozt1.el-form-item--mini {
    float: left;
    /* width: 284px; */
  }
  .el-form-item.input_co1zt1.el-form-item--mini {
    float: left;
  }
  /*.xiadan_inp.el-input {*/
  /*  width: 191px;*/
  /*  margin-left: 10px;*/
  /*  height: -45px;*/
  /*}*/
  /*.el-input--suffix .el-input__inner {*/
  /*  padding-right: 30px;*/
  /*  width: 82px;*/
  /*  height: 33px;*/
  /*}*/
  span.xiadandan {
    display: inline-block;
    width: 80px;
    height: 20px;
    margin-left: -732px;
  }
  .jine_inp2.el-input {
    width: 110px;
  }
  .jine_inp1.el-input {
    width: 110px;
  }
  table.cy_table33 {
    font-size: 12px;
    width: 859px;
    height: 69px;
    margin-top: 24px;
    text-align: center;
  }
  .cy_table133 {
    margin-left: 1%;
    width: 98%;
    margin-top: 18px;
}
  .dd_select {
    border-bottom: 1px solid lightgray;
}
  .pages_cy {
    MARGIN-LEFT: 631PX;
    MARGIN-TOP: 10PX;
  }
  .pldc01 {
    position: absolute;
    margin-top: 55px;
    margin-left: 86%;
    z-index: 9999;
}
  .pages_cy {
    position: relative;
  }
  span.pie_tutu {
    display: inline-block;
    width: 300px;
    height: 300px;
    /*background: palevioletred;*/
    margin-left: 251px;
    margin-top: 51px;
  }
  span.cy_pie_table {
    display: inline-block;
    margin-left: 69px;
    /* width: 396px; */
  }
  .hezi {
    height: auto;

  }
  span.icon_tubiao {
    position: absolute;
    margin-top: -200px;
    margin-left: 17%;
    /* border-radius: 50%; */
}
.icon_tubiao .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: #d176d3;
    border-color: #d176d3;
}
  .img_tu{
    position: relative;
  }
  .flo2{
    margin-right: 2px;
  }
  .xxddinput.el-input.el-input--mini {
    width: 150px;
  }
  .ppwwinpu.el-input.el-input--mini {
    width: 100px;
    /* height: 30px; */
  }
  .pldc01 {
    position: absolute;
    margin-top: 56px;
    margin-left: 85%;
}
.hezi {
    height: auto;
    position: relative;

}
td.tdwid5 {
    width: 56%;
}
label.el-radio.radiosmall.el-radio--mini.is-bordered {
    width: 72px;
    margin-left: -29px;
    height: 22px;
    /* line-height: 0px; */
    border-radius: 6px;
    padding: 4px;
}
button.el-button.cx001.el-button--primary.el-button--mini {
    margin-left: 20px;
    border-radius: 16px;
    background: rgb(22,155,213);
}
.pldc01 button{
  border-radius:10px;
  background: rgb(22,155,213);

}
.dingd {
    border: 1px solid lightgray;
    width: 88px;
    height: 32px;
    color: rgb(194,128,255);
    -webkit-box-shadow: 0 0 16px lightgrey;
    box-shadow: 0 0 6px grey;
    border-radius: 6px 6px 0 0;
    margin-left: 6.5%;
}
.dddd01 {
    width: 100%;
    text-align: center;
    height: 33px;
    line-height: 1px;
}
  td.tdwid5 {
    height: 40px;
  }
  .ninammee{
    display: inline-block;
    width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
</style>


